<template>
    <div>
        <el-dialog :visible.sync="value"  center fullscreen>
            <el-upload
                    ref="upload"
                    :limit="20"
                    :auto-upload="true"
                    name="file"
                    drag
                    :file-list="fileList"
                    :data="{id: user.id }"
                    :headers="{'token': token()}"
                    action="http://39.106.107.155:56700/user/uploadImage"
                    :on-success="uploadSuccess"
                    :on-exceed="uploadExceed"
                    :before-upload="beforeUpload"
                    :on-error="uploadError">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text"><em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">只支持JPG、JPEG、PNG格式的图片文件，且不超过2MB</div>
            </el-upload>
            <br>

            <el-card style="margin-bottom: 20px;border: 0px" shadow="never" :key="image.id" v-for="(image,index) in imageList">
                <template slot="header">第{{index + 1}}张图片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{image.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$YEAR_MONTH_DAY_HOURS_MINUTES_SECONDS(image.createTime)}}</template>
                <el-image :src="image.materialImage" @click="handleImageClick(image)" v-loading.fullscreen.lock="fullscreenLoading"></el-image>
            </el-card>


        </el-dialog>
    </div>
</template>

<script>

    import { getToken } from '@/utils/tool'
    import { getUserImageList ,removeUserImage} from '@/api/system/access/user'
    export default {
        name: "school-teacher-material",
        data(){
            return {
                value : false,
                quillUpdateImg:false,
                fullscreenLoading:false,
                fileList:[],
                imageList:[],
                user:{}
            }
        },
        watch:{
            value(data){
                if(data){
                    setTimeout(()=>{
                        this.getUserImageList({userId:this.user.id});
                    },200)
                }
            }
        },
        methods:{
            token(){
                return getToken();
            },
            uploadError(err,file,fileList){
                this.$message.error(file.name + "文件上传失败");
                return false;
            },
            uploadExceed(){
                this.$message.error("上传的文件超出了限定了个数");
                return false;
            },
            beforeUpload(file){
                const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
                const isLt1M = file.size / 1024 / 1024 < 1;
                if (!isJPG) {
                    this.$message.error('支持JPG、PNG格式的图片，大小不得超过1M');
                }
                if (!isLt1M) {
                    this.$message.error('文件最大不得超过1M');
                }
                isJPG && isLt1M ? this.quillUpdateImg = true : this.quillUpdateImg = false;
                return isJPG && isLt1M;
            },
            uploadSuccess(response,file,filelist){
                if(response.success){
                    this.getUserImageList({userId:this.user.id});
                }
            },
            getUserImageList(data){
                this.imageList = [];
                getUserImageList(data).then(res=>{
                    this.imageList = res.data.data;
                })
            },
            handleImageClick(image){
                if(this.user.hasLevel === '2'){
                    this.$message.error({message:'离职人员的资料无法操作',center:true});
                    return false;
                }

                this.$confirm("确定要删除该图片吗？","温馨提示",{type:'warning'}).then(()=>{
                    this.fullscreenLoading = true;
                    removeUserImage({id:image.id}).then(res=>{
                        this.fullscreenLoading = false;
                        this.getUserImageList({userId:this.user.id});
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>